<template>
  <scroll-view enable-back-to-top scroll-y class="scroll">
    <view>
      <view>
        <view class="header" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
          <view class="tabs">
            <text @tap="inOutChange(2)" class="text" :class="{ active: 2 === inOutType }"
              >支出</text
            >
            <text @tap="inOutChange(1)" class="text" :class="{ active: 1 === inOutType }"
              >收入</text
            >
          </view>
        </view>
        <XtxDrag
          v-bind:value="list"
          :column="1"
          itemHeight="50px"
          itemKey="Display"
          @end="end"
          @del="del"
          @edit="edit"
          v-if="ready"
        >
          <template #item="{ element }">
            <view class="drag-item">{{ element.title }}</view>
          </template>
        </XtxDrag>
        <view style="margin-top: 10px">
          <button class="button btn" @click="ok">确认</button>
          <button class="button btn" @click="openAdd">新增</button>
          <button class="button btn" @click="back">取消</button>
        </view>
      </view>
    </view>
  </scroll-view>
  <!--  弹窗 -->
  <uni-popup
    ref="searchDialog"
    borderRadius="20rpx"
    background-color="#fafafa"
    @close="searchDialog?.close()"
  >
    <view class="popup-content popup searchPup">
      <view class="pheader">
        <text class="title">{{ type }}</text>
        <text class="btn ok" @tap="SubmitSarchDialog()">确 认</text>
        <text class="btn del" @tap="CloseSarchDialog()">取 消</text>
      </view>
      <view class="content">
        <view class="searchbox">
          <text class="tag">商品类别</text>
          <uni-data-select v-model="newGoodsTypeName" :localdata="goodTypedata"></uni-data-select>
        </view>
        <view class="searchbox">
          <text>标签名称</text>
          <input class="uni-input" v-model="newTagName" />
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { GetGoodTypesAPI } from '@/services/job'
import {
  AddUserGoodsType,
  AddUserTagType,
  GetUserGoodsTypeAPI,
  GetUserTagTypeAPI,
  UpdateTagType1,
  UpdateUserGoodsType,
  UpdateUserGoodsType1,
  UpdateUserTagType,
} from '@/services/login'
import { useMemberStore } from '@/stores'
import type { selectdata } from '@/types/job'
import type {
  GetUserGoodsTypeResponse,
  GetUserTagTypeResponse,
  UpdateUserGoodsType1Request,
} from '@/types/note'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const { safeAreaInsets } = uni.getSystemInfoSync()
// 定义 props 接收数据
const query = defineProps<{
  inout: number
}>()
const msg = ref('')
const msg1 = ref('')
const msg2 = ref()
const ready = ref(false)
const newGoodsTypeName = ref('')
const newTagName = ref('')
const type = ref('')
const ID = ref(0)
const goodTypedata = ref<selectdata[]>()
const updateRequest = ref<UpdateUserGoodsType1Request>({
  Auth: '',
  OldGoodsTypeName: '',
  NewGoodsTypeName: '',
  OldTagName: '',
  NewTagName: '',
  InOut: 0,
  NewGoodsIcon: '',
  UserGroup: '',
  UserName: '',
})

const inOutType = ref(0)
const list = ref<GetUserTagTypeResponse[]>()
// 用户信息
const memberStore = useMemberStore()
//===查询弹窗===
const searchDialog = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
//初始化
onLoad(async () => {
  inOutType.value = parseInt(query.inout + '')
  await InitGetUserTagType()
  await InitGoodTypes(inOutType.value == 1 ? '收入' : '支出')
  ready.value = true
})
const InitGetUserTagType = async () => {
  if (memberStore.profile) {
    const res = await GetUserTagTypeAPI({
      Auth: memberStore.profile.Token,
      UserName: memberStore.profile.UserName,
      InOut: inOutType.value,
      GoodsType: '',
    })
    list.value = res.result
  }
}
//返回
const back = () => {
  uni.switchTab({ url: '/pages/my/my' })
}
const openAdd = async () => {
  type.value = '新增'
  searchDialog.value?.open()
}
//初始化商品类别
const InitGoodTypes = async (e: string) => {
  const res = await GetGoodTypesAPI({
    inout: e,
    UserGroup: memberStore.profile!.UserGroup,
  })
  goodTypedata.value = res.result
}
//确认
const SubmitSarchDialog = async () => {
  if (type.value == '新增') {
    await add()
  } else {
    if (memberStore.profile) {
      await UpdateTagType1({
        Auth: memberStore.profile!.Token,
        OldTagName: updateRequest.value.OldTagName,
        InOut: updateRequest.value.InOut,
        NewTagName: newTagName.value,
        OldGoodsType: updateRequest.value.OldGoodsTypeName,
        NewGoodsType: newGoodsTypeName.value,
        UserName: updateRequest.value.UserName,
      })
      // 成功提示
      uni.showToast({ icon: 'success', title: '修改成功' })
    }
  }
  CloseSarchDialog()
  await InitGetUserTagType()
}
//取消
const CloseSarchDialog = async () => {
  searchDialog.value?.close()
}
//新增
const add = async () => {
  if (memberStore.profile) {
    await AddUserTagType({
      IsAdd: false,
      UserName: memberStore.profile.UserName,
      InOut: inOutType.value,
      TagName: newTagName.value,
      OrderBy: 0,
      ID: 0,
      GoodsType: newGoodsTypeName.value,
      Display: '',
    })
    // 成功提示
    uni.showToast({ icon: 'success', title: '新增成功' })
  }
}
//确认
const ok = async () => {
  await UpdateUserTagType(list.value!)
  // 成功提示
  uni.showToast({ icon: 'success', title: '保存成功' })
  setTimeout(() => {
    // 页面跳转
    uni.switchTab({ url: '/pages/my/my' })
  }, 500)
}
//选择类型
const inOutChange = (type: number) => {
  inOutType.value = type
  InitGetUserTagType()
  InitGoodTypes(inOutType.value == 1 ? '收入' : '支出')
}
const end = (e: any) => {
  list.value = e
}
const edit = (e: GetUserTagTypeResponse) => {
  ID.value = e.ID
  updateRequest.value.NewGoodsTypeName = e.GoodsType
  updateRequest.value.OldGoodsTypeName = e.GoodsType
  updateRequest.value.NewTagName = e.TagName
  updateRequest.value.OldTagName = e.TagName
  updateRequest.value.InOut = e.InOut
  updateRequest.value.UserName = e.UserName
  newGoodsTypeName.value = e.GoodsType
  newTagName.value = e.TagName
  type.value = '修改'
  searchDialog.value?.open()
}
const del = (e: any) => {}
</script>

<style lang="scss">
.btn {
  background-color: #ffe5de;
  margin: 10rpx 0;
}
.header {
  padding-right: 20rpx;
  display: flex;
  justify-content: space-between;
  background-repeat: no-repeat;
  background-image: url(@/static/images/center_bg.png);
  background-size: 100%;
  line-height: 90rpx;
  color: #2f2c23;
  .tabs {
    margin-top: 60rpx;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    flex: 1;
    justify-content: center;
    font-size: medium;
    color: #2f2c23;
    .text {
      margin: 0 25rpx;
      position: relative;
    }
    .active {
      &::after {
        content: '';
        width: 40rpx;
        height: 4rpx;
        transform: translate(-50%);
        background-color: black;
        position: absolute;
        left: 50%;
        bottom: 24rpx;
      }
    }
  }
  .cancel {
    margin-top: 60rpx;
    font-size: 30rpx;
    color: #2f2c23;
  }
}
//弹出层
.popup {
  height: 400rpx;
  padding: 20rpx;
  .pheader {
    height: 40rpx;
    display: flex;
    justify-content: space-between;
    .title {
      flex: 1;
      font-size: medium;
      font-weight: bold;
      margin-left: 30rpx;
    }
    .btn {
      display: block;
      width: 100rpx;
      height: 40rpx;
      line-height: 40rpx;
      margin: 0 10rpx;
      padding: 10rpx 20rpx;
      text-align: center;
      border-radius: 60rpx;
      font-size: small;
      background-color: #fff;
    }
    .del {
      color: white;
      background-color: #939393;
    }
    .ok {
      color: #ff7b94;
      background-color: #f7e8e6;
    }
  }
  .content {
    margin-top: 40rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .Good {
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      .circle {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        background-color: #f3f3f3;
        color: #ff7b94;
        text-align: center;
        line-height: 60rpx;
      }
      .userName {
        flex: 1;
        margin-left: 10rpx;
        vertical-align: bottom;
        font-size: small;
        color: #939393;
      }
    }
    .zhichu {
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      line-height: 50rpx;
      margin: 50rpx 0 15rpx 0;
    }
    .time {
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      line-height: 50rpx;
      margin: 15rpx 0;
    }
  }
}
.searchPup {
  height: 400rpx;
  margin-top: 40rpx;
  padding: 30rpx 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.uni-input {
  height: 70rpx;
  margin-left: 10rpx;
  padding-left: 15rpx;
  border: 1rpx solid #939393;
}
.searchbox {
  height: 70rpx;
  display: flex;
  justify-content: space-between;
  line-height: 70rpx;
  margin: 20rpx 0 20rpx 0;
  .tag {
    margin-right: 10rpx;
  }
}
</style>
